<template>
    <div class="home-container">
        <van-nav-bar class="app-nav-bar">
            <van-button
                slot="title"
                class="search-btn"
                icon="search"
                type="info"
                round
                size="small"
                to="/search"
            >搜索</van-button>
        </van-nav-bar>

        <!-- 文章频道列表 -->
        <van-tabs class="channel-tabs" v-model="active" >
            <van-tab
                :title="channel.name"
                v-for="channel in channels"
                :key="channel.id"
            >
                <article-list :channel="channel" />
            </van-tab>

            <div
                slot="nav-right"
                class="wap-nav-placeholder"
            ></div>
            <div 
                class="wap-nav-wrap"
                slot="nav-right"
                @click="isChannelEditShow = true"
            >
                <van-icon name="wap-nav"></van-icon>
            </div>
        </van-tabs>

        <!-- 弹窗 频道修改 -->
        <van-popup
            v-model="isChannelEditShow"
            position="bottom"
            class="channel-edit-popup"
            closeable
            close-icon-position="top-left"
            get-container="body"
            style="height:100%"
        >
            频道修改
        </van-popup>
    </div>
</template>

<script>
import ArticleList from './components/article-list'

export default {
    components: {
        ArticleList
    },
    data() {
        return {
            active: 0,
            channels: [
                {name: "111", id:1},
                {name: "222", id:2},
                {name: "333", id:3},
                {name: "444", id:4},
                {name: "555", id:5},
            ],

            isChannelEditShow: false
        }
    }
}
</script>

<style scoped lang="less">
.home-container {
    /deep/ .van-nav-bar__title {
        max-width: none;
    }
    .search-btn {
        width: 277px;
        height: 32px;
        background: #5babfb;
        border: none;
        .van-icon {
            font-style: 16px;

        }
        .van-button__text {
            font-style: 14px;
        }
    }

    .channel-tabs {
        /deep/ .van-tab {
            border-right: 1px solid #edeff3;
            border-bottom: 1px solid #edeff3;
        }
        /deep/ .van-tabs__line {
            bottom: 20px;
            width: 15px !important;
            height: 3px;
            background: #3296fa;
        }
    }

    .wap-nav-placeholder {
        width: 33px;
        flex-shrink: 0;
    }

    .wap-nav-wrap {
        position: fixed;
        right: 0;
        width: 33px;
        height: 43px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .9;
        .van-icon {
            font-style: 24px;
        }
        &::before {
            content: '';
            width: 1px;
            background: url("./line.png") no-repeat;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
        }
    }
}

</style>